<template>
  <div>
    <div>
      <el-date-picker
        v-model="value2"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :picker-options="pickerOptions">
      </el-date-picker>
      <el-button type="primary" icon="search" @click="initData()">查询</el-button>
    </div>
    <div class="chart-container">
      <div id="chartPie" style="width:100%; height:550px;"></div>
    </div>
  </div>
</template>

<script>
  import echarts from 'echarts'
  export default {
    name: "ExpendSum",
    data() {
      return {
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        chartPie: '',
        typeName: [],//类别名称
        typeNum: [], //类别数量数量
        userId: '',
        value2: '',
      }
    },
    methods: {
      drawPieChart() {
        this.chartPie = echarts.init(document.getElementById("chartPie"));
        this.chartPie.setOption({
          //设置标题,副标题,以及标题位置居中
          title: {
            text: '收入类别统计(饼状图)',
            //subtext: '纯属虚构',
            x: 'center'
          },
          //具体点击某一项触发的样式内容
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          //左上侧分类条形符
          legend: {
            orient: 'vertical',
            left: 'left',
            data: []
          },
          //饼状图类型以及数据源
          series: [
            {
              name: '统计数量',
              type: 'pie',
              //radius: '70%',
              //center: ['50%', '60%'],
              data: [],
              //设置饼状图扇形区域的样式
              itemStyle: {
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              },
            }
          ]
        });
      },
      //动态获取饼状图的数据
      async initData() {
        let beginDate;
        let endDate;

        if(this.value2 != null) {
          beginDate= this.value2[0];
          endDate= this.value2[1];
        }
        let para = {

          beginDate: beginDate,
          endDate: endDate,
          userId: this.userId,
        };
        console.log(para);
        var res = await this.$axios.post("/drawEx", para);
        console.log(res.data);
        var getData = [];
        //先进行赋值
        for(let i=0; i<res.data.length; i++) {
          var obj = new Object();
          obj.name = res.data[i].typeName;
          obj.value = res.data[i].num;
          getData[i] = obj;
        }
        this.chartPie.setOption({
          legend: {
            data: res.data.typeName,
          },
          series:[{
            data: getData,
          }]
        });
      },
      drawCharts() {
        this.drawPieChart();
      },
    },
    mounted () {
      this.initData();
      this.drawCharts();
    },

    created() {
      let _this = this;
      this.$axios.get("/user/" + this.$store.state.user.username).then(resp => {
        _this.userId = resp.data;
      });
    }

  }

</script>

<style scoped>
  .chart-container {
    width: 100%;
    float: left;
  }
</style>
